var baseUrl = "https://www.atu360.cn/";
var homeUrl = "api/phone/index";

function indexData() {

    
    // 设置轮播图片
    // SlidePictureData();
     download(homeUrl,function(data){
         setPictures(data);
     });
    // setPictures(data);

    // 设置方案
    ProgrammaData(1,0);
    ProgrammaData(1,1);
    ProgrammaData(1,2);                

}
//接受数据
function SlidePictureData() {
    var indexPicture = new XMLHttpRequest();

    indexPicture.open("GET", baseUrl+"api/phone/index", true);

    indexPicture.send();

    // 数据的处理
    indexPicture.onreadystatechange = function () {

        // 判断是否接受成功
        if (indexPicture.readyState == 4 && indexPicture.status == 200) {

            var data = JSON.parse(indexPicture.responseText);

            // 设置多个轮播图片
            setPictures(data);

        }
    };
}

function download(url,callback) {
    var indexPicture = new XMLHttpRequest();

    indexPicture.open("GET", baseUrl+url, true);

    indexPicture.send();

    // 数据的处理
    indexPicture.onreadystatechange = function () {

        // 判断是否接受成功
        if (indexPicture.readyState == 4 && indexPicture.status == 200) {

            var data = JSON.parse(indexPicture.responseText);

            callback(data);
            // return data;
            // 设置多个轮播图片
            // setPictures(data);

        }
    };
}

//轮播图片设置
function setPictures(data) {
    
    var picutre = Array();
    var addressHref = Array();

    

    for (var i = 0; i < data.Ad.length; i++) {

         // 设置ID
    
        picutre[i] = "slidePicture" + i;
        addressHref[i] = "href" + i;

        // 设置底部提示符
        var uLi = document.getElementById("bottomIndicator")

        //让第一个处于活跃状态 active
        if (i == 0) {
            uLi.innerHTML = uLi.innerHTML + "<li data-target= '#slide' data-slide-to=" + i +
                    "class='active' ></li>";
        } else {
            uLi.innerHTML = uLi.innerHTML + "<li data-target= '#slide' data-slide-to=" + i +
                    " ></li>";
        }

        // 设置图片的样式和属性
        var divImg = document.getElementById("slidePicture");

        //让第一个处于活跃状态 active
        if (i == 0) {

            divImg.innerHTML = divImg.innerHTML + "<div class='carousel-item text-center active' ><a id=" +
             addressHref[i] + "><img  id=" + picutre[i] + " width='450' height='250'></a></div>";

        } else {
            divImg.innerHTML = divImg.innerHTML + "<div class='carousel-item text-center ' ><a id=" +
            addressHref[i] + "><img  id=" + picutre[i] + " width='450' height='250'></a></div>";
        }

        // 设置图片 picutre[i]="slidePicture"+i;
        document.getElementById(picutre[i]).src = data.Ad[i].image;

        //设置地址
        document.getElementById(addressHref[i]).href=data.Ad[i].url;

    }
}

//接受数据，选择显示在哪个选项卡
function ProgrammaData(page,sort) {
    var indexProgramma = new XMLHttpRequest();

    // 接口的参数
    var url = "https://www.atu360.cn/api/phone/findProjectClass";
    var level = 0;
    var limit = 8;
    indexProgramma.open("GET",url + "?level=" + level + "&limit=" + limit + "&page=" + page + "&sort=" +sort,true );
    indexProgramma.send();

    // 数据的处理
    indexProgramma.onreadystatechange = function () {
     

        // 判断是否接受成功
        if (indexProgramma.readyState == 4 && indexProgramma.status == 200) {

            var data = JSON.parse(indexProgramma.responseText);
            
            // 按照排序不同，接受不同的数据，显示在不同的选项卡中
            switch (sort) {

                case 0:
                    var choosePrograma ="allProgramma";
                break;

                case 1:
                    var choosePrograma ="suggestProgramma";
                break;

                case 2:
                    var choosePrograma ="collectProgramma";
                break;
                
            }
            
            // 显示选项卡里的内容
            setProgramma (data,page,choosePrograma);
            

        }

    };
}


//显示方案信息
function setProgramma (data,page,choosePrograma){

    //用来存放元素的ID，其中choosePrograma是用来指向全部产品或者推荐产品或者是收藏最多，然后在这个选项下添加数据
    var idContainer = [choosePrograma,"title","projectId","intro","like","collect","icon"];


    var allDiv = document.getElementById(idContainer[0]);

    var cd= document.getElementById("moreButton");
    var child = document.getElementById("morebutton");
    cd.removeChild(child);
    //循环8次，生产8个方案的信息
     for(var j=0;j<data.docs.length;j++)
     {
   
    //在choosePrograma指向的页面里插入一行 HTML 代码，表示的是占用全部网格来生成一个方案信息
    allDiv.innerHTML=allDiv.innerHTML+"<div class='col-12' style='padding-left: 0px'><ul class='list-group'><li class='list-group-item border-0 rounded-0'style='padding-left: 0px'><div class='row'><div class='col-9' ><h5  class='card-title ' style='margin-top: 10px '><a id='title' class='text-dark' ></a></h5><p class='card-text text-secondary' id='intro'></p><a href='#' class='text-secondary  btn btn-sm'  style='padding-left: 0' id='projectId'></a><a href='#' class='text-secondary  btn btn-sm' id='like'></a><a href='#' class='text-secondary  btn btn-sm ' id='collect'></a></div><div class='col-3'><img class='img-fluid'   style=' float: right;margin-top: 25px;width: 126px;;height: 125px' id='icon'> </div></div></li></div>";
    
    //添加方案标题的地址指向
    document.getElementById(idContainer[1]).href=data.docs[j].url;

    //显示方案的标题
    document.getElementById(idContainer[1]).innerHTML="<strong>"+data.docs[j].titleName+"</strong>";

    //显示方案的产品ID
    document.getElementById(idContainer[2]).innerHTML=data.docs[j].project_id;

    //显示方案的简要介绍
    document.getElementById(idContainer[3]).innerHTML=data.docs[j].intro;

    //显示点赞的数量
    document.getElementById(idContainer[4]).innerHTML="点赞("+data.docs[j].like+")";

    //显示收藏的数量
    document.getElementById(idContainer[5]).innerHTML="收藏("+data.docs[j].collect+")";

    //显示图片
    document.getElementById(idContainer[6]).src=data.docs[j].icon;

    //清除这一个方案信息里所有元素的ID，留给下一个方案元素使用这些ID
    for(var i=1 ;i<idContainer.length; i++)
    {
        document.getElementById(idContainer[i]).id=null;
    }
    }


    //加载更多时，判定要获取按什么排序的第几页数据
    var sort;
    if(idContainer[0]=="allProgramma")
    {
        sort=0;

    }
    else if(idContainer[0]=="suggestProgramma")
    {
        sort=1;
    }
    else if(idContainer[0]=="collectProgramma")
    {
        sort=2;
    }
    page++;


    //还没完成，按钮还不回自己消失
    allDiv.innerHTML=allDiv.innerHTML+"<div id='moreButton' class='col-10 text-center' style='margin: 30px 30px'><button type='button' class='btn '  onclick='ProgrammaData("+page+","+sort+")' id='morebutton'>加载更多</button>";
    
}



